<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: relative;
        }
        p {
            position: absolute;
            /* width:  */
        }
        #f img {
            width: 200px;
        }
        #o {
            left: 100px;
            top: 100px;
        }
        #o img {
            display: none;
            width:50px;
        }
    </style>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
    <div>
        <p id="f"><img src="./imgs/one.jpg" alt=""></p>
        <p id="o"><img src="./imgs/7_1.gif" alt="" id="w"></p>
    </div>
    <script>
        // $('#f').attr('data-key','5');
        // console.log($('#f').attr('data-key'))
        // document.onkeydown = function(e) {
        //     let keyCode = event.keyCode;
            
        //     if(keyCode == 37) {
        //         document.getElementById('w').style.display = 'block';
        //     }
        // }
        // document.onkeyup =function(e) {
        //     let keyCode = event.keyCode;
            
        //     if(keyCode == 37) {
        //         document.getElementById('w').style.display = 'none';
        //     }
        // }
        // let n = localStorage()
        // n.array.forEach(element => {

        //     document += `<.p>
        //             ${n.number}
        //         </p>`
        // });

        // let a = [1,2,4,7,8,4,5];
        // a.sort((a,b)=>b-a);
        // a.forEach((kry,y) => {
        //     第xming  第【132,32323,546,46】
        // console.log(a);


        // getdata('./')
        //     .then(
        //         res=>{

        //         }
        //     )
        
    </script>
</body>
</html>